<template>
  <div class="body">
    <!-- <button @click="add">添加</button> -->
    <img
      style="width: 40px"
      src="http://qzek6s6bf.hn-bkt.clouddn.com/zengjia.png"
      alt=""
      @click.stop="add"
      class="add"
    />
    <div>
      <!-- 模态框 -->
      <van-dialog
        v-model:show="show"
        title="标题"
        show-cancel-button
        @confirm="confirm"
      >
        <ul>
          <li>时间：<input type="text" v-model="time" /></li>
          <li>地址：<input type="text" v-model="positon" /></li>
          <!-- 上传图片 -->
          <li>
            请上传图片:
            <!-- v-model的作用是上传预览 -->
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="2"
              :after-read="afterRead"
            />
          </li>
          <li>
            文本
            <textarea
              name=""
              id=""
              cols="30"
              rows="5"
              v-model="text"
            ></textarea>
          </li>
        </ul>
      </van-dialog>
    </div>
    <!-- 1.0个人信息 -->
    <div class="info">
      <van-image round width="1.5rem" height="1.5rem" :src="userInfo.photo" />
      <p class="title">{{ userInfo.username }}</p>
      <p class="motto">{{ userInfo.motto }}</p>
    </div>

    <!-- 内容 -->
    <div class="container" v-for="(value, index) of notesList" :key="index">
      <p class="time">
        {{ this.myTime || value.time }}
        <img
          style="width: 16px"
          src="http://qzek6s6bf.hn-bkt.clouddn.com/dizhi.png"
          alt=""
        />
        {{ value.positon || "地址" }}
      </p>

      <van-grid :border="false" :column-num="2" class="imgs">
        <van-grid-item v-for="(value, index) of value.imgsSrc" :key="index">
          <van-image :src="value" />
        </van-grid-item>
      </van-grid>
      <p class="des">{{ value.text }}</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      imgList: [],
      fileList: [],
      myTime: "",
      positon: "",
      time: "",
      text: "",
      show: false,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      newList: {
        imgsSrc: [],
        text: "",
        time: "",
        positon: "",
      },
      /* 发送请求获取的数据 */
      notesList: [],
    };
  },
  created() {
    axios.get("/api/notesList").then((res) => {
      this.notesList = res.data.data.notesList;
    });
  },
  computed: {},
  methods: {
    onSearch() {
      this.$router.replace("/cityList");
    },
    /* 点击按钮，显示模态框，调用获取时间方法，将时间传递给time */
    add() {
      this.text=""
      this.show = true;
      this.nowDate();
      
    },
    /* 确认按钮将表单里的值赋给newList,插入到数组最前面 */
    confirm() {
      this.newList.positon = this.positon;
      this.newList.time = this.time;
      this.newList.text = this.text;
      this.newList.imgsSrc = this.imgList;
      this.notesList.unshift(this.newList);
    },

    /* 获取当前时间方法 */
    nowDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const day = date.date > 10 ? date.date : "0" + date.date;
      this.time = date.year + "-" + newmonth + "-" + day;
    },

    afterRead(file) {
      this.imgList.push(file.content);
      /*console.log(this.imgList); */
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
}
li {
  line-height: 30px;
}
.add {
  margin-left: 85%;
  position: absolute;
  margin-top: 10%;
  z-index: 999;
}
.info {
  width: 96%;
  margin-left: 2%;
  margin-top: 4%;
  position: relative;
}
.info > p {
  margin-left: 25%;
}
.container {
  width: 96%;
  margin-left: 2%;
  box-shadow: 1px 1px 4px rgb(175, 175, 175);
  border-radius: 2%;
  margin-top: 2%;
  height: 5rem;
}
.title {
  font-size: 20px;
  position: absolute;
  top: 25%;
}
.motto {
  position: absolute;
  top: 70%;
}
.des {
  margin-left: 2%;
  font-size: 14px;
}
.time {
  margin-left: 2%;
  padding-top: 2%;
  font-size: 18px;
}
.time > img {
  margin-left: 50%;
}
.positon p {
  float: left;
}
</style>
